<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="box form">
			<view class="line acea-row">
				<view class="tit"> 姓名 </view>
				<input type="text" v-model="list.staff_name" placeholder="请输入姓名" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 真实姓名 </view>
				<input type="text" v-model="list.true_name" placeholder="请输入真实姓名" placeholder-class="psc">
			</view>
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 性别 </view>
				<u-radio-group placement="row" @change="gender_change" activeColor="#347DFE">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in gender_list" :key="index"
						:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line acea-row">
				<view class="tit"> 手机号 </view>
				<input type="number" v-model="list.staff_mobile" placeholder="请输入手机号" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 年龄 </view>
				<input type="number" v-model="list.staff_age" placeholder="请输入年龄" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 城市 </view>
				<input type="number" v-model="city" placeholder="请选择城市" placeholder-class="psc" disabled
					@click="city_show = true">
			</view>
			<view class="line acea-row">
				<view class="tit"> 职业年限 </view>
				<input type="number" v-model="list.work_year" placeholder="请输入职业年限" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 学历 </view>
				<u-radio-group placement="row" @change="education_change" activeColor="#347DFE">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in education_list" :key="index"
						:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line">
				<view class="tit">证书技能</view>
				<view class="upload-item">
					<view class="upload-box">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="154rpx" height="154rpx">
							<image src="../../static/images/upload.png" mode="widthFix"
								style="width: 154rpx;height: 154rpx;"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="line acea-row">
				<view class="tit"> 医学背景 </view>
				<input type="text" v-model="list.medical_background" placeholder="请输入" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 身份证号 </view>
				<input type="idcard" v-model="list.staff_idcard" placeholder="请输入身份证号" placeholder-class="psc">
			</view>
			<view class="line">
				<view class="tit">上传身份证</view>
				<view class="upload-box acea-row">
					<view class="upload-item mr">
						<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
							:previewFullImage="true" multiple="false" :maxCount="1">
							<image src="../../static/images/upload.png" mode="widthFix"
								style="width: 154rpx;height: 154rpx;"></image>
						</u-upload>
						<view class="cont"> 正面 </view>
					</view>
					<view class="upload-item">
						<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3"
							:previewFullImage="true" multiple="false" :maxCount="1">
							<image src="../../static/images/upload.png" mode="widthFix"
								style="width: 154rpx;height: 154rpx;"></image>
						</u-upload>
						<view class="cont"> 反面 </view>
					</view>
				</view>
			</view>
			<view class="line">
				<view class="tit">上传形象照</view>
				<view class="upload-item">
					<view class="upload-box">
						<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic"
							:previewFullImage="true" name="4" multiple :maxCount="4" width="154rpx" height="154rpx">
							<image src="../../static/images/upload.png" mode="widthFix"
								style="width: 154rpx;height: 154rpx;"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="line acea-row picker" @click="this.$refs.jpSelect1.toOpen()">
				<view class="tit"> 服务医院 </view>
				<input type="text" v-model="hospital" placeholder-class="psc" disabled>
			</view>
			<view class="line acea-row picker" @click="this.$refs.jpSelect2.toOpen()">
				<view class="tit"> 陪诊项目 </view>
				<input type="text" v-model="accompanying" placeholder-class="psc" disabled>
			</view>
			<view class="line acea-row picker" @click="this.$refs.jpSelect3.toOpen()">
				<view class="tit"> 代办项目 </view>
				<input type="text" v-model="agency" placeholder-class="psc" disabled>
			</view>
			<view class="line acea-row picker" @click="this.$refs.jpSelect4.toOpen()">
				<view class="tit"> 陪护服务 </view>
				<input type="text" v-model="escort" placeholder-class="psc" disabled>
			</view>
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 缴纳保证金 </view>
				<view class="bond">￥{{bond}}</view>
			</view>

		</view>
		<view class="bottom-box">
			<!-- <ysxy @radioCheck="radioCheck"></ysxy> -->
			<radio-group name="" class="radio-line acea-row row-middle">
				<label class=" acea-row row-middle" @click="radioCheck">
					<radio style="transform: scale(.8);" />我已阅读并同意
				</label>
				<navigator url="/pages/user/apply_notice">《陪诊师和服务人员入驻协议》 </navigator>
			</radio-group>
			<view class="btn-box">
				<view class="btn" @click="submit"> 申请入驻</view>
			</view>
		</view>
		<!-- 城市 -->
		<u-picker :show="city_show" ref="uPicker" :columns="columns" keyName="name" @confirm="confirm"
			@change="changeHandler">
		</u-picker>

		<!-- 服务医院 -->
		<!-- 	<u-picker :show="hospital_picker_show" :columns="hospital_list" @confirm="hospital_confirm" @close="hospital_picker_show = false"
		 keyName="name"></u-picker> -->
		<jpSelect ref="jpSelect1" :list="hospital_list" @checked="hospital_checked" select="more" color="#007AFF"
			:item="hospital_select" tite="请选择服务医院">
		</jpSelect>
		<!-- 陪诊项目 -->
		<jpSelect ref="jpSelect2" :list="service1" @checked="checked1" :item="accompanying_select" select="more"
			color="#007AFF" tite="请选择陪诊项目">
		</jpSelect>
		<!-- 代办项目 -->
		<jpSelect ref="jpSelect3" :list="service2" @checked="checked2" :item="agency_select" select="more"
			color="#007AFF" tite="请选择代办项目">
		</jpSelect>
		<!-- 陪护服务 -->
		<jpSelect ref="jpSelect4" :list="service3" @checked="checked3" :item="escort_select" select="more"
			color="#007AFF" tite="请选择陪护服务">
		</jpSelect>

		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import jpSelect from '@/components/jp-select/jp-select.vue';
	export default {
		components: {
			jpSelect
		},
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '申请入驻',
					'color': false,
				},

				gender_list: [{
					name: '男',
					value: '男',
				}, {
					name: '女',
					value: '女',
				}],

				education_list: [{
					name: '高中',
					value: '高中',
				}, {
					name: '专科',
					value: '专科',
				}, {
					name: '本科',
					value: '本科',
				}],
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				// 服务医院
				hospital: [], //输入框回显
				hospital_select: "", // 弹窗回显
				hospital_list: [], //弹窗列表
				// 陪诊项目
				accompanying: [],
				accompanying_select: '',
				service1: [],
				// 代办服务
				agency: [],
				agency_select: '',
				service2: [],
				// 陪护服务
				escort: [],
				escort_select: '',
				service3: [],
				bond: '',
				isRead: false,
				list: {},
				city: '',
				city_show: false,
				columns: [
					[],
					[]
				],

			};
		},
		onLoad() {
			// 医院
			this.hospitalList();
			// 陪诊
			this.service_list1();
			// 待办服务
			this.service_list2();
			// 陪护服务
			this.service_list3();
			// 保证金
			this.getBond();

			// 获取省
			this.getProvince();
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async hospitalList() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/hospital/lists',
					data: {
						page: '',
						limit: '',
					}
				})
				this.hospital_list = res.data.data;
			},
			async getProvince() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/index/getProvince',
				})
				var province_id = res.data.data[0].id;
				this.columns[0] = res.data.data;
				this.getCity(province_id);
				this.columns[1] = this.cityArr;
				console.log(this.columns[1]);
			},
			async getCity(province_id) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/index/getCity',
					data: {
						province: province_id
					}
				})
				console.log(111111);
				this.columns[1] = res.data.data
			},
			async service_list1() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/service/lists',
					data: {
						status: 1,
						limit: ''
					}
				})
				this.service1 = res.data.data
			},
			async service_list2() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/service/lists',
					data: {
						status: 2,
						limit: ''
					}
				})
				this.service2 = res.data.data
			},
			async service_list3() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/service/lists',
					data: {
						status: 3,
						limit: ''
					}
				})
				this.service3 = res.data.data
			},
			async getBond() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/index/getBond',
				})
				this.bond = res.data.data
			},
			// 申请陪诊师
			async applyStaff() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/user/applyStaff',
					data: that.list
				})
				that.$refs.uToast.show({
					type: 'success',
					message: '您的入驻申请已成功提交，请支付押金，静待审核！',
					complete() {
						that.createDepositOrder()
					}
				})

			},
			// 创建押金订单
			async createDepositOrder() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/order/createDepositOrder',
					data: {
						openid: uni.getStorageSync('openid'),
					}
				})
				console.log('创建押金订单', res.data);
				this.payDepositOrder(res.data.data)

			},
			// 支付押金订单
			async payDepositOrder(id) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/order/payDepositOrder',
					data: {
						openid: uni.getStorageSync('openid'),
						order_id: id,
					}
				})
				console.log('支付', res.data.data)
				var orderInfo = res.data.data;
				uni.requestPayment({
					"provider": "wxpay", //固定值为"wxpay"
					"timeStamp": orderInfo.timeStamp,
					"nonceStr": orderInfo.nonceStr,
					"package": orderInfo.package,
					"signType": orderInfo.signType,
					"paySign": orderInfo.paySign,
					success: function(res) {
						that.$refs.uToast.show({
							type: 'success',
							message: '支付成功，待审核',
							complete() {
								uni.navigateBack()
							}
						})

					},
					fail: function(err) {
						that.$refs.uToast.show({
							type: 'error',
							message: '支付失败',
							complete() {
								uni.navigateBack()
							}
						})
					}
				});


			},

			async changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				var v = e.value[0]
				console.log(v)
				const res = await this.$myRequest({
					url: '/api/index/getCity',
					data: {
						province: v.id
					}
				})
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, res.data.data)
				}

			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				var v = e.value
				this.city_show = false;
				this.list.province = v[0].id;
				this.list.city = v[1].id;
				this.city = v[0].name + '-' + v[1].name;
			},

			// 性别
			gender_change: function(name) {
				console.log('gender', name);
				this.list.staff_sex = name;
			},
			// 学历
			education_change: function(name) {
				console.log('education', name);
				this.list.staff_education = name;
			},
			// 服务医院
			hospital_checked(el) {
				this.hospital_select = el;
				var hospital = [];
				var hospital_id = [];
				el.forEach(function(e) {
					hospital.push(e.name)
					hospital_id.push(e.id)
				});
				this.hospital = hospital;
				this.list.hospital_id = hospital_id;
			},

			checked1(el) {
				this.accompanying_select = el;
				var accompanying = [];
				var service_id_one = [];
				el.forEach(function(e) {
					accompanying.push(e.name)
					service_id_one.push(e.id)
				});

				this.accompanying = accompanying;
				this.list.service_id_one = service_id_one;

			},
			checked2(el) {
				this.agency_select = el;
				var agency = [];
				var service_id_two = [];
				el.forEach(function(e) {
					agency.push(e.name)
					service_id_two.push(e.id)
				});
				this.agency = agency;
				this.list.service_id_two = service_id_two;

			},
			checked3(el) {
				this.escort_select = el;
				var escort = [];
				var service_id_three = [];
				el.forEach(function(e) {
					escort.push(e.name)
					service_id_three.push(e.id)
				});
				this.escort = escort;
				this.list.service_id_three = service_id_three;

			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(JSON.parse(result).data)
					const img = JSON.parse(result).data
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: img
					}))
					fileListLen++
				}

				console.log(event.name, this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://dsby.hearoommed.com/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
						// url: 'http://192.168.0.3:11122/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							openid: uni.getStorageSync('openid')
						},
						success: (res) => {
							console.log('11111')
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						fail(res) {
							console.log('fail', res)
						}
					});
				})
			},
			radioCheck() {
				this.isRead = true;
			},
			submit() {
				this.list.openid = uni.getStorageSync('openid');
				if (this.fileList1.length !== 0) {
					this.list.skill_images = this.fileList1[0].url;
				}
				if (this.fileList2.length !== 0) {
					this.list.idcard_images = [this.fileList2[0].url, this.fileList3[0].url].toString()
				}
				if (this.fileList3.length !== 0) {
					var imgArr = [];
					this.fileList4.forEach(function(item) {
						imgArr.push(item.url)
					});
					this.list.album_images = imgArr.toString();
				}
				if (!this.isRead) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请阅读协议并同意'
					})
				} else {
					this.applyStaff();
					console.log('list', this.list)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 20rpx;
	}

	.box {
		width: 100%;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line:last-of-type {
		border-bottom: none;
	}

	.form .line .tit {
		color: #000;
		width: 140rpx;
		text-align-last: justify;
	}

	.form .line input,
	.form .line picker {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line radio-group label {
		margin-left: 30rpx;
	}

	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.upload-box {
		padding-bottom: 20rpx;
	}

	.upload-item.mr {
		margin-right: 30rpx;
	}

	.upload-item .cont {
		text-align: center;
		line-height: 1.5;
	}

	.bond {
		color: #FF0000;
	}

	.bottom-box {
		width: 100%;
		padding-top: 60rpx;
		height: 224rpx;
		z-index: 10;

	}

	.radio-line {
		font-size: 28rpx;
		color: #B0B0B0;
		padding-bottom: 30rpx;
	}

	.radio-line navigator {
		color: #347DFE;
	}

	.btn-box {
		padding-top: 20rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
